<template>
  <!-- 催收执行页-历史信息模块 -->
  <section class="component collection-history-info panel">
    <el-tabs v-model="activeName">
      <el-tab-pane
        :key="item.name"
        :label="item.label"
        :name="item.name"
        v-for="item of tabs"
      ></el-tab-pane>
    </el-tabs>
    <keep-alive>
      <component :is="activeName" ref="component"></component>
    </keep-alive>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { components, tabs } from "./collection-history-info/";
import { namespace } from "vuex-class";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    ...components
  }
})
export default class CollectionHistoryInfo extends Vue {
  @CollectionExecutionModule.State private historyInfoActiveName;
  @CollectionExecutionModule.Mutation private updateHistoryInfoActive;
  // @CollectionExecutionModule.State private legalActiveName;
  // @CollectionExecutionModule.Mutation private updateLegalActive;

  /**
   * 历史数据查询tabs
   */
  private tabs: any[] = tabs;


  private get activeName() {
    // return this.legalActiveName;
    return this.historyInfoActiveName;
  }

  private set activeName(val) {
    this.updateHistoryInfoActive(val);
    // this.updateLegalActive(val);
  }

  private mounted(){
   console.log('tabs',tabs);

  }
}
</script>

<style lang="less">
.component.collection-history-info {
  .el-tabs {
    .el-tabs__header {
      .el-tabs__nav-wrap {
        width: 100%;
      }
    }
  }
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0px 10px 10px 10px;
}
</style>
